<script setup lang="ts">
import {onLoad, onShow} from "@dcloudio/uni-app";
import {nextTick, onMounted, onUnmounted, ref} from "vue";
import {page,update,count} from '@/api/menuorder'
import {list} from '@/api/activity'
import {baseUrl} from "@/api/request";
import{getWxPayInfo} from '@/api/minappconfig'
import UniIcons from "@/uni_modules/uni-icons/components/uni-icons/uni-icons.vue";
import UniPopup from "@/uni_modules/uni-popup/components/uni-popup/uni-popup.vue";
import UniTag from "@/uni_modules/uni-tag/components/uni-tag/uni-tag.vue";
import UniEasyinput from "@/uni_modules/uni-easyinput/components/uni-easyinput/uni-easyinput.vue";
import UniPopupDialog from "@/uni_modules/uni-popup/components/uni-popup-dialog/uni-popup-dialog.vue";
import { time } from "console";
const previewImageBtn=(url)=>{
  uni.previewImage({
    urls: [url],
    longPressActions: {
      itemList: ['发送给朋友', '保存图片', '收藏'],
      success: function(data) {
        console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
      },
      fail: function(err) {
        console.log(err.errMsg);
      }
    }
  });
}
const triggered=ref(false)
const tableNumber=ref()
onLoad(()=>{
	 triggered.value = true;
	 uni.getStorage({
		 key:'tableNumber',
		 success: function (res)  {
			 if(res.data){
				 tableNumber.value = res.data;
			 }
		 }
	 })
	 uni.getStorage({
	  key:'shopId',
	  success: function (res)  {
		  if(res.data){
			  searchParams.value.shopId = parseInt(res.data);
		  }
	  }
	 })
   noPayNum()
  console.log("tableNumber",tableNumber.value)
  if (tableNumber.value){
    orderType.value = 0
  }else if (inverted2.value){
    orderType.value = '2'
  }else if (inverted1.value){
    orderType.value = '3'
  }
})
//获取未付款订单数量
const noPayNum=()=>{
  //未付款订单显示小红点
  count({"orderStatus":"0"}).then(res=>{
    if(res.code == 200){
      noPayOrderCount.value = res.data;
      if (noPayOrderCount.value > 0){
        uni.setTabBarBadge({
          index:2,
          text:noPayOrderCount.value+'',
        })
      }else{
        uni.removeTabBarBadge({
          index:2
        })
      }
    }
  })
}
const onPulling=(e)=> {
  triggered.value=true;
}
const onRefresh=()=> {
  triggered.value=true;
  searchParams.value.page=1;
  getMenuOrderList()
  triggered.value = false; // 需要重置
}
const onRestore=()=> {
  triggered.value = false; // 需要重置
}
const onAbort=()=> {
  triggered.value = false; // 需要重置
}

const searchParams= ref({
  page:1,
  limit:10,
})
const total = ref(0)
const menuOrderList = ref([])
const noPayOrderCount = ref(0)
const getMenuOrderList = () => {
  page(searchParams.value).then(res=>{
    if (searchParams.value.page > 1){
      menuOrderList.value=menuOrderList.value.concat(res.data.list)
    }else{
      menuOrderList.value=res.data.list;
    }
    total.value = res.data.total;
	if(menuOrderList.value.length > 0){
		menuOrderList.value.forEach((item)=>{
			if(item.orderStatus==='0'){
				item.targetDate = new Date(new Date(item.orderTime).getTime() + 24 * 60 * 60 * 1000); // 当前时间加上24小时的毫秒数
				countdown(item)
			}
		})
	}
    noPayNum()
  })
}
function countdown(item) {
    // 设置倒计时更新频率为每秒
    let timer = setInterval(function() {
        var now = new Date(); // 当前时间
        var distance = item.targetDate - now; // 计算剩余时间（毫秒）
 
        // 时间计算
        var days = Math.floor(distance / (1000 * 60 * 60 * 24));
		if(days < 10){
			days='0'+days;
		}
        var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
		if(hours < 10){
			hours='0'+hours;
		}
        var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
		if(minutes < 10){
			minutes='0'+minutes;
		}
        var seconds = Math.floor((distance % (1000 * 60)) / 1000);
		if(seconds < 10){
			seconds='0'+seconds;
		}
 
        // 显示倒计时
		if(hours && minutes && seconds){
			item.countdownValue =hours + ":" + minutes + ":" + seconds;
		}
        // 如果到达目标时间，停止倒计时
        if (distance < 0) {
            clearInterval(timer);
            item.countdownValue.value = "";
			console.log(2222,item.countdownValue)
			searchParams.value.page=1;
			getMenuOrderList()
        }
    }, 1000);
}
const message=ref()
const msgType=ref('success')
const messageText=ref('')
const popup = ref()

const firtMoney = ref(0)
const couponMoney = ref(0)
const jfMoney = ref(0)
const pingtuanMoney = ref(0)
const nowPrice = ref(0)
const payBtn=async ()=>{
  if (selectList.value.length == 0){
    msgType.value='warn'
    messageText.value='请先选择待付款账单'
    message.value.open()
    return
  }
  await nextTick()
  popup.value.open('bottom')
  jisuan()
}
const jisuan=()=>{
  firtMoney.value = 0
  if (first.value &&  !first.value.userActivityId){
    firtMoney.value = (totalNoPay.value * ((100-(first.value.discount  * 10))/100)).toFixed(2)
    if (activityIds.value.indexOf(first.value.id) === -1){
      activityIds.value.push(first.value.id)
    }
  }
  couponMoney.value=0
  if (selectedCoupon.value){
    couponMoney.value =(totalNoPay.value * ((100-(selectedCoupon.value.discount  * 10))/100)).toFixed(2)
    if (activityIds.value.indexOf(selectedCoupon.value.id) === -1){
      activityIds.value.push(selectedCoupon.value.id)
    }
  }
  jfMoney.value=0
  if (jf.value && selectJf.value == 1){
    jfMoney.value = (jf.value.pointsMoney * selectNum.value).toFixed(2)
  }
  pingtuanMoney.value=0
  if (pingtuan.value && selectTuangou.value == 1){
    pingtuanMoney.value = (totalNoPay.value * ((100-(pingtuan.value.discount  * 10))/100)).toFixed(2)
  }
  console.log(totalNoPay.value,
      firtMoney.value,
      couponMoney.value,
      jfMoney.value,
      pingtuanMoney.value)
  nowPrice.value = (totalNoPay.value-firtMoney.value-couponMoney.value-jfMoney.value-pingtuanMoney.value).toFixed(2);
  console.log("现价："+nowPrice.value)
}
const lower=(e)=>{
  console.log("底部",e)
  if (menuOrderList.value.length < total.value){
    searchParams.value.page++;
    getMenuOrderList()
  }
}
const selectNum = ref(0)
const totalNoPay = ref(0)
const selectList = ref([])
const checkboxChange=(item,e)=> {
  if (e.detail.value[0] != undefined){
    if (selectList.value.indexOf(item.id) === -1){
      selectList.value.push(item.id)
      totalNoPay.value=totalNoPay.value+item.total
    }
  }else{
    selectList.value.splice(selectList.value.indexOf(item.id),1)
    totalNoPay.value=totalNoPay.value-item.total
  }
  selectNum.value=selectList.value.length
  if (selectNum.value > 0 && selectNum.value == noPayOrderCount.value){
    checkedAll.value=true
  }else{
    checkedAll.value=false
  }
}
const selectAll=(e)=>{
  console.log("select all"+e.detail.value.length)
  if(e.detail.value.length > 0){
    for (var i = 0; i < menuOrderList.value.length; i++){
      if (menuOrderList.value[i].orderStatus == '0'){
        menuOrderList.value[i].checked=true;
        selectList.value.push(menuOrderList.value[i].id)
        totalNoPay.value=totalNoPay.value+menuOrderList.value[i].total
      }
    }
  }else{
    for (var i = 0; i < menuOrderList.value.length; i++){
      if (menuOrderList.value[i].orderStatus == '0'){
        menuOrderList.value[i].checked=false;
      }
    }
    selectList.value=[]
    totalNoPay.value=0;
  }
  selectNum.value=selectList.value.length
  if (selectNum.value > 0){
    checkedAll.value=true;
  }else{
    checkedAll.value=false;
  }

}
const paySubmitBtn=()=>{
  if (selectTuangou.value == 1 && !tuangouCondition.value){
    return;
  }
  alertDialog.value.open()
  content.value='合计：'+totalNoPay.value+'元'
}
const alertDialog=ref()
const content=ref()
const dialogConfirm=()=>{
  //支付暂时无法接入，先注释
  getWxPayInfo({"shopId":searchParams.value.shopId,"amount":totalNoPay.value*100,
  "menuOrderIds":selectList.value}).then(res=>{
    if (res.code == 200 && res.data){
      const provider=ref()
      provider.value='wxpay'
      // 仅作为示例，非真实参数信息。
      uni.requestPayment({
        provider: provider.value,
        orderInfo:'',
        timeStamp: res.data.timeStamp,
        nonceStr: res.data.nonceStr,
        package: res.data.packageVal,
        signType: res.data.signType,
        paySign: res.data.paySign,
        success: function (res) {
          console.log('success:' + JSON.stringify(res));
          dialogClose()
          popup.value.close()
          searchParams.value.page=1;
          getMenuOrderList();
          noPayNum()
        },
        fail: function (err) {
          console.log('fail:' + JSON.stringify(err));
        }
      });
    }else{
		uni.showToast({
			title:'请先登录'
		})
	}
  })
}
const dialogClose=()=>{
  alertDialog.value.close()
  alertDialogReceive.value.close()
}
const hasJuan = ref(true)
const choosecouponBtn=()=>{
  uni.navigateTo({
    url:'/pages/order/choosecoupon',
      }
  )
}
const selectJf = ref(0)
const radioChange=(val)=>{
  selectJf.value = val.detail.value;
  if (selectJf.value == 1){
    activityIds.value.push(jf.value.id)
  }else if (activityIds.value.indexOf(jf.value.id) != -1){
    activityIds.value.pop(jf.value.id)
  }
  jisuan()
}
const selectTuangou = ref(0)
const tuangouCondition = ref(false)
const radioChangeTuangou=(val)=>{
  selectTuangou.value = val.detail.value;
  if (selectTuangou.value == 1){
    activityIds.value.push(pingtuan.value.id)
  }else if (activityIds.value.indexOf(pingtuan.value.id) != -1){
    activityIds.value.pop(pingtuan.value.id)
  }
  jisuan()
}
const checkedAll=ref(false)

onMounted(()=>{
  searchParams.value.page=1;
  getMenuOrderList();
  getFirst()
  getJf()
  getPingTuan()
})
const pingtuan=ref()
const getPingTuan=()=>{
  list({"type":"3"}).then(res=>{
    pingtuan.value=res.data[0];
  })
}
const jf = ref()
const getJf=()=>{
  list({"type":"1"}).then(res=>{
    jf.value=res.data[0];
  })
}
const first = ref()
const getFirst=()=>{
  list({"type":"0"}).then(res=>{
    first.value=res.data[0];
    jisuan()
  })
}
const selectedCoupon = ref()
onShow(()=>{
  searchParams.value.page=1;
  getMenuOrderList();
  console.log("show show")
  uni.getStorage({
    key: 'choosecoupon',
    success: function (res) {
      selectedCoupon.value=res.data
      console.log("selectedCoupon:"+selectedCoupon.value)
      if (selectedCoupon.value){
        couponMoney.value =(totalNoPay.value * ((100-(selectedCoupon.value.discount  * 10))/100)).toFixed(2)
        jisuan()
        console.log("couponMoney:"+couponMoney.value)
      }
    },
    fail:function(e) {
      console.log("selectedCoupon err:"+e)
    }
  })
})

const activityIds = ref([])
const userJf = ref(10)
const inverted1=ref(false)
const inverted2=ref(true)
const orderType=ref()
const setInverted=()=>{
    inverted1.value=!inverted1.value
    inverted2.value=!inverted2.value
  if (inverted1.value){
    orderType.value='3'
  }else if (inverted2.value){
    orderType.value='2'
  }
}
const receiveUser=ref({
  name:'小红',
  address:'河南信阳息县南苑小区201号',
  phone:'1303237289'
})
const disabledname=ref(true)
const disabledaddress=ref(true)
const disabledphone=ref(true)
const handleBlur=()=>{
  console.log("blur")
  disabledname.value=true;
  disabledaddress.value=true;
  disabledphone.value=true;
}
const alertDialogReceive=ref()
const receiveId=ref()
const openReceive= (id)=>{
  receiveId.value=id
  alertDialogReceive.value.open()
  msgType.value='success';
}
const dialogConfirmReceive=()=>{
  let form = {
    id:receiveId.value,
    orderStatus:'4'
  }
  update(form).then(res=>{
    if (res.code == 200){
      dialogClose()
      searchParams.value.page=1;
      getMenuOrderList();
    }
  })
}

const inverted3=ref(false)
const inverted4=ref(true)
const setInverted2=()=>{
  inverted3.value=!inverted3.value
  inverted4.value=!inverted4.value
  if (inverted3.value){
    orderType.value='0'
  }else if (inverted4.value){
    orderType.value='1'
  }
}
</script>

<template>
<view class="uni-container-order">
  <view class="order-item-title">
    <view class="tangshi" v-if="tableNumber">
      <view style="text-align: center;color: goldenrod;">
        <text>当前桌号: {{tableNumber}}</text>
      </view>
      <view  class="waimai">
        <uni-tag
            custom-style="font-weight:bolder;font-size:14px;letter-spacing: 1.5px;padding:5px"
            class="uni-tag" text="堂食"  :circle="true"  :inverted="inverted4" type="primary" @click="setInverted2" ></uni-tag>
        <uni-tag
            custom-style="font-weight:bolder;font-size:14px;letter-spacing: 1.5px;padding:5px"
            class="uni-tag" text="打包"  :circle="true"  :inverted="inverted3" type="primary" @click="setInverted2"></uni-tag>
      </view>
    </view>
    <view v-else style="width: 100%;">
      <view  class="waimai">
        <uni-tag
            custom-style="font-weight:bolder;font-size:14px;letter-spacing: 1.5px;padding:5px"
            class="uni-tag" text="送餐上门"  :circle="true"  :inverted="inverted1" type="primary" @click="setInverted" ></uni-tag>
        <uni-tag
            custom-style="font-weight:bolder;font-size:14px;letter-spacing: 1.5px;padding:5px"
            class="uni-tag" text="自取"  :circle="true"  :inverted="inverted2" type="primary" @click="setInverted"></uni-tag>
      </view>
      <view class="userreceiveinfo" v-if="inverted2">
        <view class="receiveinfo">
          <text style="color: #675F54;font-weight: bolder;">收货人姓名:&nbsp;&nbsp;</text>
          <input  @blur="handleBlur" :disabled="disabledname" v-model="receiveUser.name" :class="disabledname ? '' : 'receive'"/>
        </view>
        <uni-icons color="#D1BF70" class="edit-icon" @click="disabledname = !disabledname" type="icon-bianji" custom-prefix="iconfont" size="20"></uni-icons>
      </view>
      <view class="userreceiveinfo" v-if="inverted2">
        <view class="receiveinfo">
          <text style="color: #675F54;font-weight: bolder">收货地址:&nbsp;&nbsp;</text>
          <input   @blur="handleBlur"   :disabled="disabledaddress"  v-model="receiveUser.address" :class="disabledaddress ? '' : 'receive'"/>
        </view>
        <uni-icons  color="#D1BF70"  class="edit-icon"  @click="disabledaddress = !disabledaddress"  type="icon-bianji" custom-prefix="iconfont" size="20"></uni-icons>
      </view>
      <view class="userreceiveinfo" v-if="inverted2">
        <view class="receiveinfo">
          <text style="color: #675F54;font-weight: bolder;">手机号:&nbsp;&nbsp;</text>
          <input   @blur="handleBlur"  :disabled="disabledphone" v-model="receiveUser.phone" :class="disabledphone ? '' : 'receive'"/>
        </view>
        <uni-icons  color="#D1BF70"  class="edit-icon"  @click="disabledphone = !disabledphone"  type="icon-bianji" custom-prefix="iconfont" size="20"></uni-icons>
      </view>
      <view class="userreceiveinfo" v-if="inverted1">
        <view class="receiveinfo">
          <text style="color: #675F54;font-weight: bolder;">店铺地址:&nbsp;&nbsp;</text>
          <text>河南信阳息县301号宏远小吃</text>
        </view>
        <uni-icons color="#D1BF70" class="edit-icon" @click="disabledname = !disabledname" type="location" size="20"></uni-icons>
      </view>
      <view class="userreceiveinfo" v-if="inverted1">
        <view class="receiveinfo">
          <text style="color: #675F54;font-weight: bolder;">店铺电话:&nbsp;&nbsp;</text>
          <text>13958028038</text>
        </view>
        <uni-icons color="#D1BF70" class="edit-icon" @click="disabledname = !disabledname" type="phone" size="20"></uni-icons>
      </view>
    </view>
  </view>
  <view class="order-body">
    <scroll-view  scroll-y="true" style="height: 100%;"  @scrolltolower="lower"
                  refresher-enabled="true"  :refresher-triggered="triggered"
                  :refresher-threshold="100" @refresherpulling="onPulling"
                  @refresherrefresh="onRefresh" @refresherrestore="onRestore"
                  @refresherabort="onAbort" class="orderlist">
      <view class="order-item-content" v-for="(item, index) in menuOrderList" :key="index" :index="index">
        <image  @click="previewImageBtn(baseUrl+item.menuImg)"   :src="baseUrl+item.menuImg" mode="aspectFill" class="order-item-icon"></image>
        <view class="order-info">
          <view class="order-info-1" style="width: 100%">
            <text>{{item.menuName}}</text>
            <text style="font-size: 12px;font-weight: normal;color: gray;">单价：{{item.price}} 元</text>
          </view>
          <view class="order-info-1" >
            <text style="font-size: 12px;font-weight: normal;color: gray;">数量：{{item.quantity}} 份</text>
            <text style="font-size: 12px;font-weight: normal;color: gray;">总价：{{item.total}} 元</text>
          </view>
        </view>
        <view class="order-info-status">
		  <text class="order-status" v-if="item.orderStatus == '6'">已关闭</text>	
		  <text class="order-status" v-if="item.orderStatus == '5'">已退款</text>
          <text class="order-status" v-if="item.orderStatus == '1'">已付款</text>
          <text class="order-status" v-if="item.orderStatus == '2'" style="color: #675F54;">备货中</text>
          <view  class="order-status" v-if="item.orderStatus == '3'" >
            <text style="color: #D1BF70;">派送中</text>
            <button @click="openReceive(item.id)" class="mini-btn" type="primary" size="mini">确认收到</button>
          </view>
          <text class="order-status" v-if="item.orderStatus == '4'" style="color: #566B4C">已送达</text>
          <view  style="display: flex;flex-direction: column;justify-content: space-around;align-items: center;font-size: 10px;color: #5A5127;height: 100%;" v-if="item.orderStatus == '0'">
            <text>待付款</text>
			<text style="color: gray;" v-if="item.countdownValue">{{item.countdownValue}}</text>
            <checkbox-group   class="order-status-check"   @change="checkboxChange(item,$event)" >
              <checkbox  style="transform:scale(0.8)"  size="small" :value="item.id" :checked="item.checked"></checkbox>
            </checkbox-group>
          </view>
		  <view  class="order-status" v-if="item.orderStatus == '-1'">
		    <text>待下单</text>
		    <checkbox-group   class="order-status-check"   @change="checkboxChange(item,$event)" >
		      <checkbox  style="transform:scale(0.8)"  size="small" :value="item.id" :checked="item.checked"></checkbox>
		    </checkbox-group>
		  </view>
        </view>
      </view>
    </scroll-view>
  </view>
  <view class="order-pay-button" v-if="noPayOrderCount > 0">
    <view>
      <checkbox-group @change="selectAll"  class="choose-all-checkbox">
        <checkbox   style="transform:scale(0.8)" value="0" :checked="checkedAll"/>全选
      </checkbox-group>
    </view>
    <view>
      已选: {{selectNum}} 份
    </view>
    <view>
      合计: {{totalNoPay}} 元
    </view>
    <view class="pay-text" @click="payBtn">
      下一步
    </view>
  </view>
  <uni-popup ref="popup" background-color="#fff">
    <view class="popup-content">
      <view class="pay-text-2">
        <text>现价：{{nowPrice}} 元</text>
        <text
            v-if="(firtMoney>0 && !first.userActivityId) || couponMoney>0 || jfMoney>0 || pingtuanMoney >0"
            style="text-decoration: line-through;
        color: gray;font-size: 14px;">原价：{{totalNoPay}} 元</text>
      </view>
      <view class="first-order" v-if="first && !first.userActivityId">
        <text>{{first.name}}</text>
        <text style="color: white">已减：{{firtMoney}} 元</text>
      </view>
      <view v-if="hasJuan" class="juan-has">
        <text v-if="selectedCoupon">
          {{selectedCoupon.name}}
        </text>
        <text  style="width: 70%"  v-else>
          您有优惠券待使用
        </text>
        <text style="color: white"  v-if="selectedCoupon">
          已减：{{couponMoney}} 元</text>
        <view class="juan-choose" @click="choosecouponBtn">
          <text  v-if="selectedCoupon">重新选择</text>
          <text v-else>请选择</text>
          <uni-icons type="forward" size="20"></uni-icons>
        </view>
      </view>
      <view v-else class="juan">
        <text>暂无优惠卷</text>
      </view>
      <view class="jf-use" v-if="jf && userJf > 0">
        <view class="jf-use-item">
          <text>是否消耗积分</text>
          <radio-group style="display: flex;align-items: center"
                       @change="radioChange">
            <radio value="0" :checked="selectJf == 0"
                   style="transform:scale(0.6)"/>否
            <radio value="1" :checked="selectJf == 1" style="transform:scale(0.6)"/>是
          </radio-group>
        </view>
        <view v-if="selectJf == 1" class="jf-use-item2">
          <text style="color: #FFFFFF">已减 {{jfMoney}} 元</text>
          <text >消耗 {{jf.orderSubPoints * selectNum}} 积分</text>
        </view>
      </view>
      <view class="tuangou" v-if="pingtuan && !pingtuan.userActivityId">
        <view class="tuangou-item">
          <text>是否团购</text>
          <radio-group style="display: flex;align-items: center"
                       @change="radioChangeTuangou">
            <radio value="0" :checked="selectTuangou == 0"
                   style="transform:scale(0.6)"/>否
            <radio value="1" :checked="selectTuangou == 1"
                   style="transform:scale(0.6)"/>是
          </radio-group>
        </view>
        <view  v-if="selectTuangou == 1" class="tuangou-desc">
          <text v-if=" selectNum < pingtuan.groupBuyingPersons">
            当前订单订购少于{{pingtuan.groupBuyingPersons}}份，须满，可享受团购折扣
          </text>
          <text style="color: white" v-else>
            已减：{{pingtuanMoney}} 元</text>
        </view>
      </view>
      <view class="weixin-pay" @click="paySubmitBtn" disabled="true">
        <view style="display:  flex;align-items: center;font-weight: normal">
          <image  src="/static/icon/weixinzhifu.png" class="wx-icon"></image>
          <text style="color:chocolate;">微信支付</text>
        </view>
        <view style="color: white">
          <text>付款</text>
        </view>
      </view>
    </view>
  </uni-popup>
  <uni-popup ref="message" type="message">
    <uni-popup-message :type="msgType" :message="messageText" :duration="2000"></uni-popup-message>
  </uni-popup>
  <uni-popup ref="alertDialog" type="dialog">
    <uni-popup-dialog type="'info'" cancelText="取消" confirmText="确定" title="是否支付" :content="content" @confirm="dialogConfirm"
                      @close="dialogClose"></uni-popup-dialog>
  </uni-popup>
  <uni-popup ref="alertDialogReceive" type="dialog">
    <uni-popup-dialog :type="msgType" cancelText="关闭" confirmText="收到"
                      title="是否收到?" content="" @confirm="dialogConfirmReceive"
                      @close="dialogClose"></uni-popup-dialog>
  </uni-popup>
</view>
</template>

<style scoped lang="scss">
.mini-btn{
  padding: 2px;
  width: auto;
  height: 20px;
  font-size: 8px;
  position: absolute;
  bottom: 2px;
  left: 3px;
  left: 3px;
  font-weight: bolder;
}
.edit-icon{
  margin-left: 5px;
  margin-right: 5px;
}
.receive{
  padding-left: 2ch;padding-right: 2ch;
  height: 5px;width: 55%;border: 1px solid gray;background-color: white;color: black;
  border-radius: 5px;
}
.uni-tag{
  min-width: 100px;
}
.waimai{
  width: 100%;
  height: 100%;
  display: flex;
  text-align: center;
  align-items: center;
  justify-content: space-evenly;
  padding-top: 10px;
  padding-bottom: 10px;
}
.userreceiveinfo{
  padding-left: 10px;
  width: 96.5%;
  padding-top: 5px;
  padding-bottom: 5px;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.receiveinfo{
  width: 100%;
  display: flex;
  align-items: center;
}
.tuangou{
  font-size: 13px;
  background-color: white;
  color: black;
  margin-top: 10px;
  padding: 10px;
  border-radius: 2px;
   padding-top: 15px;
    padding-bottom: 15px;
}
.tuangou-desc{
  font-size: 12px;
  color:red;
}
.tuangou-item{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.jf-use{
  font-size: 13px;
  background-color: white;
  color: black;
  margin-top: 10px;
  padding: 10px;
  border-radius: 2px;
  padding-top: 15px;
  padding-bottom: 15px;
}
.jf-use-item{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.jf-use-item2{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.juan-has-choose-item{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 5px;
  padding-top: 5px;
}
.juan-has-choose{
  font-size: 13px;
  background-color: white;
  color: black;
  margin-top: 10px;
  padding: 10px;
  border-radius: 2px;
  padding-top: 15px;
  padding-bottom: 15px;
}
.pay-text-2 text{
  margin: 5px;
  font-size: 15px;
}
.first-order{
  font-size: 13px;
  background-color: white;
  color: black;
  margin-top: 10px;
  padding: 10px;
  border-radius: 2px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 15px;
  padding-bottom: 15px;
}
.juan-choose{
  display:  flex;
  align-items: center;
}
.juan-has{
  font-size: 13px;
  background-color: white;
  color: black;
  margin-top: 10px;
  padding: 10px;
  border-radius: 2px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 15px;
  padding-bottom: 15px;
}
.juan{
  text-align: right;
  font-size: 14px;
  background-color: #B5A74F;
  color: black;
  margin-top: 10px;
  padding: 10px;
  border-radius: 2px;
}
.choose-all-checkbox{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
}
.pay-text-2{
  text-align: center;
  color: black;
  font-weight: bolder;
}
.weixin-pay{
  background-color: #98bc86;
  display:  flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
  padding: 8px;
  border-radius: 2px;
  font-size: 14px;
  font-weight: bolder;
   padding-top: 15px;
    padding-bottom: 15px;
}
.wx-icon{
  width: 24px;
  height: 24px;
  margin-right: 5px;
}
.popup-content{
  display: flex;
  flex-direction: column;
  padding: 15px;
  min-height: 80px;
  background-color: papayawhip;
  color: #B5A74F;
  font-size: 18px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}
.pay-text{
  letter-spacing: 2.5px;
  font-weight: bolder;
  height: 100%;
  width: 25%;
  background-color: #d68e6a;
  font-size: 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #000000;
}
.order-pay-button{
  font-size: 13px;
  color: gray;
  font-weight: bold;
  height: 10%;
  background-color: white;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  padding-left: 5px;
  bottom: 0px;
  position: absolute;
}
.order-status{
  font-size: 10px;
  color: #5A5127;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-weight: bolder;
}
.order-status-check{
  text-align: right;
  margin-top: 2px;
}
.order-status text{
  margin-right: 5px;
}
.order-body{
  height:80%;
  width: 90%;
  margin-top: 4%;
}
.order-item-content{
  background-color: whitesmoke;
  width: 100%;
  height: 12vh;
  margin-bottom: 5px;
  display: flex;
  align-items: center;
  border-radius: 5px;
  padding: 5px;
}
.order-item-icon{
  width: 30%;
  height: 90%;
  padding-left: 2%;
  border-radius: 5px;
}
.order-info{
  width: 80%;
  height: 100%;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  padding-left: 2%;
}
.order-info-status{
  position: relative;
  width: 20%;
  height: 100%;
  padding-right: 5px;
}
.order-info-1{
  font-weight: bolder;
  width: 70%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}
.order-info-1 text{
  color: #566B4C;
  font-size: 14px;
}
.uni-container-order{
  background-color: #C9B9AA;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: fixed;
  left: 0px;
  top: 0px;
  bottom: 0px;
  right: 0px;
}
.order-item-title{
  background-color: ghostwhite;
  width: 90%;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 10px;
  color: white;
  border-radius: 5px;
}
.tangshi{
  margin-top: 10px;
  margin-bottom: 10px;
  border-radius: 5px;
}
</style>